<template>
  <div class="warring_statistics">
    <div id="warringStatisticsChar"
         style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
// import ECharts from 'vue-echarts'
export default {
  // components: {
  //   'v-echart': ECharts
  // },
  props: {
    newDate: {
      type: Date,
      default: Date
    }
  },
  data() {
    return {
      warringOption: null,
      trafficWay: [{ name: '预警', value: 100 }, { name: '故障隔离', value: 200 }, { name: '正常', value: 300 }, { name: '未激活', value: 30 }],
      angle: 0,
      chart: null
    }
  },
  watch: {
    newDate() {
      this.chart.resize()
    }
  },
  created() {

  },
  mounted() {
    this.init(['预警', '故障隔离', '正常', '未激活'])
  },
  methods: {
    toDayAlert() {
      this.$get('console/api/v1/cockpit/collect-status-percent').then(r => {
        const data = r.data.data[0]
        const legendData = []
        for (const item in data) {
          legendData.push(item)
          this.trafficWay.push({
            name: item,
            value: data[item]
          })
        }
        this.init(legendData)
      })
    },
    init(legendData) {
      this.chart = echarts.init(document.getElementById('warringStatisticsChar'))
      var color = ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000']
      var data = []
      for (var i = 0; i < this.trafficWay.length; i++) {
        data.push(
          {
            value: this.trafficWay[i].value,
            name: this.trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          }
          // {
          //   value: 2,
          //   name: '',
          //   itemStyle: {
          //     normal: {
          //       label: {
          //         show: false,
          //       },
          //       labelLine: {
          //         show: false,
          //       },
          //       color: 'rgba(0, 0, 0, 0)',
          //       borderColor: 'rgba(0, 0, 0, 0)',
          //       borderWidth: 0,
          //     },
          //   },
          // }
        )
      }
      const z1 = this.initSericeOption('arc', 0, 90, false, 2.3)
      const z2 = this.initSericeOption('circle', 0, 90, false, 2.3)

      const z3 = this.initSericeOption('arc', 180, 270, false, 2.3)
      const z4 = this.initSericeOption('circle', 0, 180, false, 2.3)

      const z5 = this.initSericeOption('arc', 270, 40, true, 2.7)
      const z6 = this.initSericeOption('arc', 90, 220, true, 2.7)

      const z7 = this.initSericeOption('circle', 0, 90, true, 2.7)
      const z8 = this.initSericeOption('circle', 0, 270, true, 2.7)

      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [30, 65],
          // center: ["50%", "60%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: (params) => {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < this.trafficWay.length; i++) {
                    total += this.trafficWay[i].value
                  }
                  if (total === 0) {
                    percent = 0
                  } else {
                    percent = ((params.value / total) * 100).toFixed(0)
                  }

                  if (params.name !== '') {
                    return params.name + '\r' + percent + '%'
                  } else {
                    return ''
                  }
                }
              }
            }
          },
          data: data
        },
        z1, z2, z3, z4, z5, z6, z7, z8
      ]
      this.warringOption = {
        color: color,

        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                // image: img,
                width: 178,
                height: 178
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: false
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          x: 'left',
          y: 'center',
          data: legendData, // [],

          textStyle: {
            color: '#fff'
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.draw()
    },
    getCirlPoint(x0, y0, r, angle) {
      const x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
      const y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
      return {
        x: x1,
        y: y1
      }
    },
    draw() {
      setInterval(() => {
        this.angle = this.angle + 3
        this.chart.setOption(this.warringOption, true)
      }, 100)
    },
    initSericeOption(type, angle1, angle2, isJust, num) {
      // tyep: arc circle
      let shape = null
      let style = null
      if (type === 'arc') {
        style = {
          stroke: '#00FEFF',
          fill: 'transparent',
          lineWidth: 1.5
        }
      } else {
        style = {
          stroke: '#00FEFF', // 绿
          fill: '#00FEFF'
        }
      }
      const option = {
        name: 'ring5',
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: (params, api) => {
          const x0 = api.getWidth() / 2
          const y0 = api.getHeight() / 2
          const r = Math.min(api.getWidth(), api.getHeight()) / num

          if (type === 'arc') {
            shape = {
              cx: x0,
              cy: y0,
              r: r,
              startAngle: ((angle1 + (isJust ? -this.angle : this.angle)) * Math.PI) / 180,
              endAngle: ((angle2 + (isJust ? -this.angle : this.angle)) * Math.PI) / 180
            }
          } else {
            const point = this.getCirlPoint(x0, y0, r, angle2 + (isJust ? -this.angle : this.angle))
            shape = {
              cx: point.x,
              cy: point.y,
              r: 4
            }
          }
          return {
            type: type,
            shape: shape,
            style: style,
            silent: true
          }
        },
        data: [0]
      }
      return option
    }
  }
}
</script>
<style lang="scss" scoped>
.warring_statistics {
  width: 100%;
  height: 100%;
}
</style>
